<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>气泡图数据展示</title>
    <link rel="stylesheet" href="../static/assets/css/index.css">
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
    <link rel="stylesheet" href="../static/assets/font/iconfont.css">
    <!-- <script src="./js/index.js"></script> -->
    <link rel="stylesheet" href="../static/assets/css/110.css">
    <script src="../static/assets/js/echarts.min.js"></script>

</head>
<body>
    <!-- 侧边栏 -->
    <aside class="main-aside">
        <!-- 3D动态盒 -->
        <div class="header3D">
            <div class="cube" id="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
        </div>
        <!-- 侧边栏选项 -->
        <div class="asideOption">
            <ul>
                <li>
                    <a href="index.html">
                        <span>首页</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bar.html">
                        <span>柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="pie.html">
                        <span>饼图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="line.html">
                        <span>折线图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bubble.html">
                        <span>气泡图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="polar-bar.html">
                        <span>极坐标下的堆积柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
            </ul>



        </div>
        <!-- 旋转图 -->
        <div class="loader">
            <div class="left-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="right-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </aside>
    <!-- 头部导航栏 -->
     <div class="headernav">
         <h1>气泡图展示-票价与热度</h1>

        <!-- 时间 -->
        <button id="time" type="text"></button>
    </div>
    <!-- 内容区 -->
    <div class="main-content" style="height: 100%">
        <!-- 内容展示 -->
        <div class="show-content" id="main" style="height: 93%">

        </div>
    </div>



    <!-- 时间 -->
    <script src="../static/assets/js/index.js"></script>
    <!-- 气泡图 -->
     <script>
        var chartDom = document.getElementById('main');

        chartDom.innerHTML = `
            {% for data in xizang %}
                {% if data[4] != 0 and data[1] != None%}
                    <p>{{ data[1] }}</p>
                    <p>{{ data[4] }}</p>
                    <p>{{ data[0] }}</p>
                    <p>1</p>
                {% endif %}
            {% endfor %}
            {% for data in zjj %}
                {% if data[4] != 0 and data[1] != None%}
                    <p>{{ data[1] }}</p>
                    <p>{{ data[4] }}</p>
                    <p>{{ data[0] }}</p>
                    <p>2</p>
                {% endif %}
            {% endfor %}
            {% for data in daLi %}
                {% if data[4] != 0 and data[1] != None%}
                    <p>{{ data[1] }}</p>
                    <p>{{ data[4] }}</p>
                    <p>{{ data[0] }}</p>
                    <p>3</p>
                {% endif %}
            {% endfor %}
            {% for data in cs %}
                {% if data[4] != 0 and data[1] != None%}
                    <p>{{ data[1] }}</p>
                    <p>{{ data[4] }}</p>
                    <p>{{ data[0] }}</p>
                    <p>4</p>
                {% endif %}
            {% endfor %}

        `
        {#// 获取所有p元素#}
        var oP = document.querySelectorAll("p");
        {#console.log(oP.length)#}
        // 将p元素添加到数组中
        // 先获取所有的有数据的p元素
        var arr = [];
        for(var i = 0; i< oP.length; i++){
                arr.push([Number(oP[i].innerText),Number(oP[i+1].innerText) ,oP[i+2].innerText,Number(oP[i+3].innerText)]);
                i += 3;
        }

        console.log(arr);
        // 获取西藏的
        var arr1 = [];
        for (var i = 0; i< 28; i++){
            arr1.push(arr[i]);
        }
        console.log(arr1);


        // 张家界
        var arr2 = [];
        for (var i = 28; i< 48; i++){
            arr2.push(arr[i]);
        }
        console.log(arr2);

        // 大理
        var arr3 = [];
        for (var i = 48; i< 75; i++){
            arr3.push(arr[i]);
        }
        console.log(arr3);

        // 长沙
        var arr4 = [];
        for (var i = 75; i< arr.length; i++){
            arr4.push(arr[i]);
        }
        console.log(arr4);


        // 气泡图实现
        var myChart = echarts.init(chartDom);
        var option;
        const data = [arr1, arr2, arr3, arr4];
        console.log(data);
        {#chartDom.innerHTML = data;#}
        option = {
          backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
            {
              offset: 0,
              color: '#f7f8fa'
            },
            {
              offset: 1,
              color: '#cdd0d5'
            }
          ]),
          title: {
            text: '四个地区景点-票价与热度所构气泡图',
            left: '5%',
            top: '1%',
            subtext: '1: 西藏 2：张家界 3：大理 4：长沙',
            subtextStyle: {
                fontSize: 16,
                color: '#000',
            }
          },
            tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{c}"
                  },
          legend: {
            right: '10%',
            top: '3%',
            data: ['1', '2','3','4']
          },
          grid: {
            left: '8%',
            top: '10%'
          },
          xAxis: {
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            scale: true
          },
          series: [
            {
              name: '1',
              data: data[0],
              type: 'scatter',
              symbolSize: function (data) {
                return Math.sqrt(data[0]);
              },
              emphasis: {
                focus: 'series',
                label: {
                  show: true,
                  formatter: function (param) {
                    return param.data[2];
                  },
                  position: 'top'
                }
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(120, 36, 50, 0.5)',
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                  {
                    offset: 0,
                    color: 'rgb(251, 118, 123)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(204, 46, 72)'
                  }
                ])
              }
            },
            {
              name: '2',
              data: data[1],
              type: 'scatter',
              symbolSize: function (data) {
                return Math.sqrt(data[0]);
              },
              emphasis: {
                focus: 'series',
                label: {
                  show: true,
                  formatter: function (param) {
                    return param.data[2];
                  },
                  position: 'top'
                }
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(25, 100, 150, 0.5)',
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                  {
                    offset: 0,
                    color: 'rgb(129, 227, 238)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(25, 183, 207)'
                  }
                ])
              }
            },
            {
              name: '3',
              data: data[2],
              type: 'scatter',
              symbolSize: function (data) {
                return Math.sqrt(data[0]);
              },
              emphasis: {
                focus: 'series',
                label: {
                  show: true,
                  formatter: function (param) {
                    return param.data[2];
                  },
                  position: 'top'
                }
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(120, 36, 50, 0.5)',
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255,235,14)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(224,208,30)'
                  }
                ])
              }
            },
              {
              name: '4',
              data: data[3],
              type: 'scatter',
              symbolSize: function (data) {
                return Math.sqrt(data[0]);
              },
              emphasis: {
                focus: 'series',
                label: {
                  show: true,
                  formatter: function (param) {
                    return param.data[2];
                  },
                  position: 'top'
                }
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(120, 36, 50, 0.5)',
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                  {
                    offset: 0,
                    color: 'rgba(79,224,38,0.7)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(77,210,119)'
                  }
                ])
              }
            },
          ]
        };

        option && myChart.setOption(option);
     </script>
</body>
</html>